<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户列表</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <script src="/js/jquery.hammer/hammer.min.js"></script>
    <script src="/js/bootstrap.table/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.table/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
    <script src="/js/dialog.js"></script>
    <script src="/js/comm.js" type="text/javascript"></script>

    <link href="/css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="/css/bootstrap.table/bootstrap-table.min.css"/>
    <link href="/css/dialog.css" rel="stylesheet" />
    <link href="/css/common.css" rel="stylesheet" />
</head>
<script type="text/javascript">
    $(function () {
        //调用函数，初始化表格
        initTable();

        //新增
        $("#btn_add").on("click",function () {
            window.location.href = "addOrEditClient.html?btnPurid="+btnPurid;
        })

        //修改
        $("#btn_edit").on("click", function () {
            editArticle();
        })
    })

    function editArticle() {
        var valueInfo = $('#mytab').bootstrapTable('getSelections');
        if(valueInfo!=null&&valueInfo!=""&&valueInfo.length>0){
            window.location.href = "addOrEditClient.html?clientid="+valueInfo[0].clientId+"&btnPurid="+btnPurid;
        }else {
            promptDail('请选择一条数据!');
        }
    }


    function initTable() {
        //先销毁表格
        $('#mytab').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#mytab").bootstrapTable({
            method: "post",  //使用get请求到服务器获取数据
            contentType: "application/x-www-form-urlencoded",
            url: "/client/infoList.do", //获取数据的Servlet地址
            sidePagination: "server", //表示服务端请求
            queryParamsType:'',
            cache: false,
            striped: true,
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    clientName : $("#clientName").val(),
                    clientPhone : $("#clientPhone").val()
                };
                return param;
            }
        });

    }

</script>
<body style="padding:5px;">
<div class="panel panel-default" >
    <div class="panel-heading">
        查询条件
    </div>
    <div class="panel-body form-group" style="margin-bottom:0px;">
        <form id="searchForm">
            <label class=" control-label" style="float:left;text-align: left; margin-top:5px">客户名称：</label>
            <input type="text" class="form-control" style="width: 100px;float:left;" name="clientName" id="clientName"/>
            <label class=" control-label" style="float:left;text-align: left; margin-top:5px;margin-left: 15px;">手机号：</label>
            <input type="text" class="form-control" style="width: 100px;float:left;" name="clientPhone" id="clientPhone"/>
            <div class="col-sm-1" style="float:left;">
                <button class="btn btn-primary" id="search_btn" onclick="initTable();return false;">查询</button>
            </div>
        </form>
    </div>
</div>
<div id="toolbar" class="btn-group pull-right"  style="margin: 0px 0px 5px 0px;">
    <button id="btn_edit" type="button" class="btn btn-default btn-purview" style=" border-radius: 0">
        <span class="glyphicon glyphicon-pencli"  ></span>修改
    </button>
    <button id="btn_add" type="button" class="btn btn-default btn-purview">
        <span class="glyphicon glyphicon-plus" ></span>新增
    </button>
</div>
<table id="mytab" data-toggle="table" class="table table-hover table-bordered" data-single-select="true"
       data-toolbar-align="right" data-toolbar="#toolbar" data-pagination="true"  data-page-size="15" data-striped="true"
       data-page-list="[15,10,20,30]" data-pagination-h-align="right" data-pagination-detail-h-align="left"
       data-pagination-loop="false" data-click-to-select="true" >
    <colgroup>
        <col style="width: 3%">
        <col style="width: 7%">
        <col style="width: 5%">
        <col style="width: 20%">
        <col style="width: 10%">
        <col style="width: 25%">
    </colgroup>
    <thead>
    <tr >
        <th data-align="center" data-valign="middle" data-checkbox="true" ></th>
        <th data-align="center" data-valign="middle" data-field="clientCode">用户编号</th>
        <th data-align="center" data-valign="middle" data-field="clientName">客户名称</th>
        <th data-align="center" data-valign="middle" data-field="clientPhone">客户电话</th>
        <th data-align="center" data-valign="middle" data-field="recordBook">记录本</th>
        <th data-align="center" data-valign="middle" data-field="addDate">添加时间</th>
    </tr>
    </thead>
</table>
</body>
</html>